<template>
  <div class="navbar">
    <el-dropdown :hide-on-click="false">
      <span class="el-dropdown-link">
        {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: '',
    };
  },
  methods: {
    logout() {
      const from = this.$router.currentRoute.fullPath;
      localStorage.removeItem('user');
      this.$router.replace({
        path: '/login',
        query: { from: encodeURIComponent(from) },
      });
    },
  },
  created() {
    const account = localStorage.getItem('account');
    if (account) {
      this.name = account;
    }
  },
};
</script>
<style lang="scss" scoped>
  .navbar {
    background-color: #FFF;
    color: #333;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    .el-dropdown-link {
      cursor: pointer;
    }
  }
</style>
